<template>
  <div id="questionDetailView">
    <a-space>
      <a-row style="width: 98vw">
        <a-col :span="12">
          <a-tabs default-active-key="1">
            <a-tab-pane key="1" title="题目">
              <a-card
                v-if="question"
                aria-readonly="true"
                :title="question.title"
                class="question_card"
              >
                <template #extra>
                  <a-space>
                    <a-tag
                      v-for="tag of question.tags"
                      :key="tag"
                      :color="colors[tag] ?? '#0fc6c2'"
                      >{{ tag }}</a-tag
                    >
                  </a-space>
                </template>
                <a-space>
                  <a-descriptions
                    title="判题条件"
                    :column="{ xs: 1, md: 2, lg: 2 }"
                    size="large"
                  >
                    <a-descriptions-item label="时间限制">
                      {{ question.judgeConfig?.timeLimit }}
                    </a-descriptions-item>
                    <a-descriptions-item label="内存限制">
                      {{ question.judgeConfig?.memoryLimit }}
                    </a-descriptions-item>
                  </a-descriptions>
                </a-space>
                <MdView :value="question.content as string" />
              </a-card>
            </a-tab-pane>
            <a-tab-pane
              key="2"
              title="答案"
              :disabled="store.state?.user.loginUser.userRole !== 'admin'"
            >
              答案页
            </a-tab-pane>
            <a-tab-pane key="3" title="评论"> 评论页 </a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col :span="12">
          <a-space direction="vertical" style="margin-left: 10px">
            <a-form
              :model="form"
              :auto-label-width="true"
              direction="horizontal"
              style="margin-top: 10px"
            >
              <a-form-item field="form.language" label="编程语言:">
                <a-select
                  v-model="form.language"
                  @change="onChange"
                  style="width: 200px"
                >
                  <a-option>java</a-option>
                  <a-option>cpp</a-option>
                </a-select>
              </a-form-item>
            </a-form>
            <CodeEdit
              :value="form.code as string"
              :language="form.language as string"
              :handle-change="doChange"
              :readonly="false"
            />
            <div v-if="showMessage" style="width: 100%">
              <a-space size="large" style="text-align: center; width: 100%">
                <div>
                  <a-alert :show-icon="false" style="width: 100%">
                    <text style="color: #444444; font-size: large"
                      >代码运行状态:</text
                    >
                    &nbsp;
                    <a-spin :hide-icon="spin" />
                    <text :style="{ color: colors[submitMessage] }">
                      {{ submitMessage }}</text
                    >
                  </a-alert>
                </div>
              </a-space>
              <div>
                <a-textarea
                  :model-value="extraMessage"
                  aria-readonly="true"
                  error
                  :auto-size="{
                    minRows: 5,
                  }"
                  style="
                     {
                      font-size: 100px;
                      width: 100%;
                      overflow-y: visible;
                      max-height: 30vh;
                    }
                  "
                />
              </div>
            </div>
            <a-button type="primary" style="width: 200px" @click="doSubmit()"
              >提交</a-button
            >
          </a-space>
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  QuestionControllerService,
  QuestionSubmitVO,
  QuestionVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRoute, useRouter } from "vue-router";
import CodeEdit from "@/components/CodeEdit.vue";
import MdView from "@/components/MdView.vue";
import { colors } from "@/access/GlobalColorEnum";
import store from "@/store";

// 参数
const question = ref<QuestionVO>();
const route = useRoute();
const router = useRouter();
const questionId = route.params.id as unknown as number;
const form = ref<QuestionSubmitVO>({
  language: "java",
  code: "" as string,
  questionId: questionId,
});
const spin = ref(false);

// 函数
const loads = async () => {
  console.log(questionId);
  if (!questionId) {
    return;
  }
  const res = await QuestionControllerService.getQuestionVoByIdUsingGet(
    questionId
  );
  if (res.code === 0) {
    question.value = res.data;
  } else {
    message.error("数据加载失败" + res.message);
  }
};
const onChange = (v: string) => {
  console.log(v, form.value.language);
};
onMounted(loads);

const submitMessage = ref("Waiting");
const showMessage = ref(false);
const extraMessage = ref("");

// 提交函数
const doSubmit = async () => {
  showMessage.value = true;
  spin.value = false;
  submitMessage.value = "waiting";
  let now = Date.now();
  const res = await QuestionControllerService.doQuestionSubmitUsingPost(
    form.value
  );
  console.log("传输并执行代码时间", Date.now() - now + "ms");
  if (res.code === 0) {
    console.log(res);
    message.success("提交成功");
    submitMessage.value = res.data.judgeInfo.message;
    extraMessage.value = res.data.extraMessage;
    spin.value = true;
  } else {
    message.error("提交失败" + res.value.message);
    router.push({
      name: "/user/login",
      query: { redirect: router.currentRoute.value.fullPath },
    });
  }
};
const doChange = (v: string) => {
  form.value.code = v;
};
</script>

<style>
#questionDetailView {
}
.question_card {
  margin-top: 2px;
  margin-left: 5px;
}
</style>
